<script lang="ts">
  import { setContext } from "svelte";
  import "../app.css";
  import { Toaster, createToaster } from "@skeletonlabs/skeleton-svelte";

  let { children } = $props();
  const toaster = createToaster({
    placement: "bottom-end",
  });
  setContext("toast", toaster);
</script>

<Toaster {toaster}></Toaster>

{@render children()}

<div class="absolute -left-[10000px]">
  <div class="text-primary-50 bg-primary-50 border-primary-50"></div>
  <div class="text-primary-100 bg-primary-100 border-primary-100"></div>
  <div class="text-primary-200 bg-primary-200 border-primary-200"></div>
  <div class="text-primary-300 bg-primary-300 border-primary-300"></div>
  <div class="text-primary-400 bg-primary-400 border-primary-400"></div>
  <div class="text-primary-500 bg-primary-500 border-primary-500"></div>
  <div class="text-primary-600 bg-primary-600 border-primary-600"></div>
  <div class="text-primary-700 bg-primary-700 border-primary-700"></div>
  <div class="text-primary-800 bg-primary-800 border-primary-800"></div>
  <div class="text-primary-900 bg-primary-900 border-primary-900"></div>
  <div class="text-primary-950 bg-primary-950 border-primary-950"></div>

  <div class="text-secondary-50 bg-secondary-50 border-secondary-50"></div>
  <div class="text-secondary-100 bg-secondary-100 border-secondary-100"></div>
  <div class="text-secondary-200 bg-secondary-200 border-secondary-200"></div>
  <div class="text-secondary-300 bg-secondary-300 border-secondary-300"></div>
  <div class="text-secondary-400 bg-secondary-400 border-secondary-400"></div>
  <div class="text-secondary-500 bg-secondary-500 border-secondary-500"></div>
  <div class="text-secondary-600 bg-secondary-600 border-secondary-600"></div>
  <div class="text-secondary-700 bg-secondary-700 border-secondary-700"></div>
  <div class="text-secondary-800 bg-secondary-800 border-secondary-800"></div>
  <div class="text-secondary-900 bg-secondary-900 border-secondary-900"></div>
  <div class="text-secondary-950 bg-secondary-950 border-secondary-950"></div>

  <div class="text-surface-50 bg-surface-50 border-surface-50"></div>
  <div class="text-surface-100 bg-surface-100 border-surface-100"></div>
  <div class="text-surface-200 bg-surface-200 border-surface-200"></div>
  <div class="text-surface-300 bg-surface-300 border-surface-300"></div>
  <div class="text-surface-400 bg-surface-400 border-surface-400"></div>
  <div class="text-surface-500 bg-surface-500 border-surface-500"></div>
  <div class="text-surface-600 bg-surface-600 border-surface-600"></div>
  <div class="text-surface-700 bg-surface-700 border-surface-700"></div>
  <div class="text-surface-800 bg-surface-800 border-surface-800"></div>
  <div class="text-surface-900 bg-surface-900 border-surface-900"></div>
  <div class="text-surface-950 bg-surface-950 border-surface-950"></div>
</div>
